<script setup>
import { h, reactive , watch} from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined,AreaChartOutlined ,ApiOutlined} from '@ant-design/icons-vue';
import { useRouter,useRoute } from 'vue-router'
import { useUserStore } from "@/store/user";
import { useSystemSettingStore } from "@/store/systemSetting";

const userStore = useUserStore()
const systemSettingStore = useSystemSettingStore()

const router = useRouter()
const route = useRoute()

const state = reactive({
  // rootSubmenuKeys: ['sub1'],
  // openKeys: ['sub1'],
  selectedKeys: ['/excelService'],
});

watch(() => route.path , (currentPath) => {
  state.selectedKeys = [currentPath]
},{immediate:true})

function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
const items = reactive([
  getItem('邮件服务', '/emailService', () => h(MailOutlined)),
  getItem('图表服务', '/excelService', () => h(AreaChartOutlined)),
  getItem('API服务', '/apiService', () => h(ApiOutlined)),
  getItem('系统服务', '/systemService', () => h(SettingOutlined)),
]);

const onOpenChange = openKeys => {
  const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
  if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
    state.openKeys = openKeys;
  } else {
    state.openKeys = latestOpenKey ? [latestOpenKey] : [];
  }
};

const menuClickHandler = (obj) => {
  router.push(obj.key)
}
</script>

<template>
  <div class="left-sidebar h-full w-max">
    <div class="w-full flex items-center h-16 border-b-gray-200 border-b border-r">
      <a-avatar size="large" src="https://t.alcy.cc/pc?1.0633709132056424" class="ml-5" />
      <h3 class="text-center mb-0 ml-4">{{ userStore.userInfo.name }}</h3>
    </div>
    <a-menu
        theme="light"
        v-model:selectedKeys="state.selectedKeys"
        :style="{ width: `${ useSystemSettingStore().leftSidebar.leftWidth }px` }"
        mode="inline"
        :open-keys="state.openKeys"
        :items="items"
        @openChange="onOpenChange"
        class="h-[calc(100%-4rem)]"
        @click="menuClickHandler"
    ></a-menu>
  </div>
</template>

<style scoped lang="less">
.left-sidebar {
  :deep(.ant-menu-item) {
    width: 100%;
    border-radius: 0px;
    margin: 0px;
  }
  :deep(.ant-menu-item-selected) {
    &:after {
      position: absolute;
      content: "";
      width: 4px;
      height: 100%;
      top: 0;
      left: 0;
      background-color: v-bind('systemSettingStore.ui.primaryColor');
    }
  }
}
</style>